@charset "utf-8";
@import "_reset";
body {
    position: relative;
    .song_content {
        .song_bg {
            position: fixed;
            overflow: hidden;
            height: 100%;
            width: 100%;
            background: url(../img/109951163110962030.jpg) no-repeat 50%;
            background-size: 180%;
            filter: blur(11px);
            transform: scale(1.2);
            z-index: -2;
        }
        .bg_zz {
            position: fixed;
            overflow: hidden;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, .45);
            z-index: -1;
        }
        .content_box {
            position: relative;
            &::after {
                position: absolute;
                content: "";
                display: block;
                width: 110px;
                height: 157px;
                top: 0px;
                left: 45%;
                background: url(../img/needle-plus.png) no-repeat;
                background-size: 100%;
            }
            .m_wy_logo {
                position: absolute;
                top: 12px;
                left: 10px;
                background: url(../img/logo_3x.png);
                display: block;
                width: 100px;
                height: 17px;
                background-size: 100px auto;
                a {
                    display: inline-block;
                    width: 100%;
                    height: 17px;
                }
            }
            .m-song-wrap {
                padding-top: 80px;
                z-index: 10;
                border-radius: 50%;
                overflow: hidden;
            }
            .m-song-disc {
                overflow: hidden;
                position: relative;
                width: 342px;
                height: 342px;
                margin: 0 auto;
                .m-song-turn {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    background: url(../img/disc-plus.png);
                    background-size: cover;
                    .m-song-rollwrap {
                        width: 212px;
                        height: 212px;
                        margin: -106px 0 0 -106px;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        z-index: 1;
                        border-radius: 50%;
                        overflow: hidden;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .m-song-plybtn {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 5;
                    transform: translate(-50%) translateY(-50%);
                    display: none;
                    width: 65px;
                    height: 65px;
                    background: url(../img/play_btn_3x.png);
                    background-size: cover;
                }
            }
            .song_name {
                margin-top: 20px;
                color: white;
                text-align: center;
                font-size: 16px;
                padding-bottom: 10px;
                span {
                    color: darkgrey;
                }
            }
            .geci_box {
                height: 96px;
                overflow: hidden;
                ul {
                    transition: all 0.8s;
                    padding-top: 31px;
                    li {
                        color: darkgrey;
                        text-align: center;
                        font-size: 16px;
                        padding: 5px 0;
                    }
                }
            }
        }
        .bottom_box {
            text-align: center;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 10px;
            z-index: 20;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
            span {
                letter-spacing: 5px;
                padding: 0 6px;
                font-size: 18px;
                border-radius: 50px;
                width: 47.5%;
                border: 1px solid #D33A31;
            }
            .open {
                background-color: transparent;
                a{
                   color: #d33a31; 
                }
            }
            .download {
                color: white;
                background: #d33a31;
            }
        }
        .ani {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 60px;
            z-index: 20;
            i {
                animation: cartoon 1.2s steps(1) infinite;
                margin: 0 auto;
                display: block;
                width: 17px;
                height: 12px;
                background-repeat: no-repeat;
                background-size: 17px auto;
                background-image: url(../img/下载.png);
                background-position: 0 0;
            }
        }
    }
}

.geci_active {
    color: white !important;
}

@keyframes cartoon {
    0% {
        background-position: 0 0px;
    }
    12.5% {
        background-position: 0 -12px;
    }
    25% {
        background-position: 0 -24px;
    }
    37.5% {
        background-position: 0 -36px;
    }
    50% {
        background-position: 0 -48px;
    }
    62.5% {
        background-position: 0 -60px;
    }
    75% {
        background-position: 0 -72px;
    }
    87.5% {
        background-position: 0 -84px;
    }
}
@media (min-width:374px){
    #song_name{
        padding-bottom: 20px;
    }
}
@media (max-width: 420px){
    #m-song-disc {
        width: 280px;
        height: 280px;
    }
    #m-song-rollwrap {
        width: 174px;
        height: 174px;
        margin: -87px 0 0 -87px;
    }
    #m-song-wrap{
        padding-top: 65px;
    }
    #content_box{
        &::after{
            width: 95px;
            height: 140px;
        }
    }
}